<!DOCTYPE html>
{% load static %}
{% load custom_tags %}
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>拼多多商品页</title>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap" rel="stylesheet">
    <link rel="icon" href="{% static 'images/logo.png' %}">
    <link rel="stylesheet" href="{% static 'stylesheets/index.css' %}">
</head>
<body>
<div class="navbar">
    <div class="logo">
        <img class="brand" src="{% static 'images/logo.png' %}">
    </div>
    <div class="user-actions">
        <a style="padding-right: 20px;padding-left: 20px;text-decoration: none;color: #FFFFFF" href="/admin">登录</a>
    </div>
</div>

<div class="search-bar">
    <form action="/pdd" method="get">
        <input class="text" name="keyword" id='query' type="text" value="{{ q }}" placeholder="输入关键字搜索">
        <button id='submit_search' type="submit" class="button cw-icon"><i></i>搜索</button>
    </form>
</div>


<!-- 分页导航 -->

<ul class="pagination-cards">
    {% if prev_page and prev_page != 0 %}
        <li class="page-item">
            <a class="page-link" href="?page=1&{{ params }}" title="First">
                首页
            </a>
        </li>
        <li class="page-item">
            <a class="page-link" href="?page={{ prev_page }}&{{ params }}" title="Previous">
                上页
            </a>
        </li>
    {% endif %}

    {% for num in range_page %}
        {% if num > current_page|add:'-3' and num < current_page|add:'3' %}
            <li class="page-item {% if current_page == num %}active{% endif %}">
                <a class="page-link" href="?page={{ num }}&{{ params }}">{{ num }}</a>
            </li>
        {% endif %}
    {% endfor %}

    {% if next_page and next_page != total_page %}
        <li class="page-item">
            <a class="page-link" href="?page={{ next_page }}&{{ params }}" title="Next">
                下页
            </a>
        </li>
        <li class="page-item">
            <a class="page-link" href="?page={{ total_page }}&{{ params }}" title="Last">
                末页
            </a>
        </li>
    {% endif %}
</ul>


<div class="product-grid">
    {% for item in goods_list %}
        <a href="/pdd_show?goods_sign={{ item.goods_sign }}" style="color: black;text-decoration: none" target="_blank">
            <div class="product-card">
                <img src="{{ item.goods_image_url }}" alt="商品图片">
                <div class="product-info">
                    <h3>{{ item.goods_name }}</h3>
                    <p>价格：{% pdd_price item.min_normal_price %}</p>
                    <p>销量：{{ item.sales_tip }}</p>
                </div>
            </div>
        </a>
    {% endfor %}
    <!-- 更多商品卡片 -->
</div>
</body>
</html>